<!--
 * @Author: your name
 * @Date: 2021-08-04 17:10:06
 * @LastEditTime: 2021-08-04 17:52:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\父组件子组件数据传输.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件相互通信</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 注意一定是先引入vue.js文件，再引入组件的js文件 -->
</head>
<body>
    <!-- 子组件使用父组件的内容  $parent -->
    <!-- app这个vue实例是一个父级组件，b-div组件是一个子级组件 -->
    <div id="app">
        <b-div title="汽车"></b-div>
        <b-div title="飞机"></b-div>
        <b-div title="火车"></b-div>
    </div>
    <script>
        // 页面加载时先渲染里面的组件，再渲染外面的组件
        // 在子组件里面打印父组件中data的属性name，age
        Vue.component('b-div',{
            props:['title'],
            template:`
            <div>
                div：{{title}}----{{name}}----{{$parent.age}}
            </div>
            `,
            // 获取父组件属性方法一：在模板里面直接{{$parent.属性}}获取
            data(){
                return{
                    // 获取父组件的属性方法二：在data中用属性接收
                    name:this.$parent.name,
                }
            },
            mounted() {
                console.log(this.title+"渲染完毕.......");
                // this.$parent是父组件对象
                console.log(this.$parent.name)
            },
            
        })
        new Vue({
            el:'#app',
            data(){
                return{
                    name:'Jack',
                    age:21
                }
            },
            mounted() {
                console.log("app 渲染完毕.......")
                // 通过console.log()输出的结果显示渲染是从底层开始到最外层
            },
        })
    </script>
</body>
</html>